<template>
    <div>
        <Card>
            <span slot="title">商品列表</span>
            <div slot="content">
                <el-table :data="tableData" style="width: 100%;" height="450">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form
                                label-position="left"
                                inline
                                class="demo-table-expand"
                            >
                                <el-form-item label="商品ID">
                                    <span>{{ props.row.id }}</span>
                                </el-form-item>
                                <el-form-item label="商品名称">
                                    <span>{{ props.row.name }}</span>
                                </el-form-item>
                                <el-form-item label="所属分类">
                                    <span>{{ props.row.category }}</span>
                                </el-form-item>
                                <el-form-item label="商品价格">
                                    <span>{{ props.row.price }}</span>
                                </el-form-item>
                                <el-form-item label="商品图片">
                                    <img
                                        :src="baseUrl + props.row.imgUrl"
                                        alt=""
                                    />
                                </el-form-item>
                                <el-form-item label="创建时间">
                                    <span>{{ props.row.ctime | timer}}</span>
                                </el-form-item>
                                <el-form-item label="商品评价">
                                    <span>{{ props.row.rating }}</span>
                                </el-form-item>
                                <el-form-item label="商品销量">
                                    <span>{{ props.row.sellCount }}</span>
                                </el-form-item>
                                <el-form-item label="商品描述">
                                    <span>{{ props.row.goodsDesc }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" prop="name">
                    </el-table-column>
                    <el-table-column label="所属分类" prop="category">
                    </el-table-column>
                    <el-table-column label="商品价格" prop="price">
                    </el-table-column>
                    <el-table-column label="商品图片" prop="imgUrl">
                        <template slot-scope="scope">
                            <img :src="baseUrl + scope.row.imgUrl" alt="" />
                        </template>
                    </el-table-column>
                    <el-table-column label="商品描述" prop="goodsDesc">
                    </el-table-column>
                    <el-table-column label="操作" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button
                                size="medium "
                                type="primary"
                                @click="handleEdit(scope.row)"
                                >编辑</el-button
                            >
                            <el-button
                                size="medium "
                                type="danger"
                                @click="handleDelete(scope.row)"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>

                    <!-- 编辑模态框 -->
                    <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="50%"
                    >
                        <el-form
                            :model="ruleForm"
                            :rules="rules"
                            ref="ruleForm"
                            label-width="100px"
                            class="ruleForm"
                        >
                            <el-form-item label="商品名称" prop="name">
                                <el-input
                                    v-model="ruleForm.name"
                                    class="longInput"
                                ></el-input>
                            </el-form-item>

                            <el-form-item label="商品分类" prop="category">
                                <el-select
                                    v-model="ruleForm.category"
                                    placeholder="请选择活动区域"
                                >
                                    <el-option
                                        v-for="item in category"
                                        :key="item.cateName"
                                        :label="item.cateName"
                                        :value="item.cateName"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- 计数器 -->
                            <el-form-item label="商品价格">
                                <el-input-number
                                    v-model="ruleForm.price"
                                    :min="0"
                                    :max="999"
                                    label="描述文字"
                                ></el-input-number>
                            </el-form-item>

                            <!-- 图片上传 -->
                            <el-form-item label="商品图片">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://127.0.0.1:5000/goods/goods_img_upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload"
                                >
                                    <img
                                        v-if="imgUrl"
                                        :src="baseUrl + ruleForm.imgUrl"
                                        class="img"
                                    />
                                    <i
                                        v-else
                                        class="el-icon-plus avatar-uploader-icon"
                                    ></i>
                                </el-upload>
                            </el-form-item>

                            <!-- 商品描述 -->
                            <el-form-item label="商品描述" prop="goodsDesc">
                                <el-input
                                    type="textarea"
                                    v-model="ruleForm.goodsDesc"
                                    class="longInput"
                                ></el-input>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false"
                                >取 消</el-button
                            >
                            <el-button type="primary" @click="changgeOk"
                                >确 定</el-button
                            >
                        </span>
                    </el-dialog>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
import Card from "@/components/Card.vue";
import { getGoods, delGoods, editGoods } from "@/apis/goods.js";
import local from "@/utilis/local.js";
import moment from "moment";
export default {
    components: {
        Card,
    },
    data() {
        return {
            // 模态框显示隐藏
            dialogVisible: false,
            currentPage: 1, //当前页数
            total: 0, //总页数
            pageSize: 10, //每页显示的条数
            tableData: [],
            baseUrl: "http://127.0.0.1:5000/upload/imgs/goods_img/",

            // 模态框属性
            ruleForm: {
                name: "",
                category: "",
                imgUrl: "",
                price: "",
                goodsDesc: "",
                id: "",
            },
            rules: {},
            category: {},
            imgUrl: "",
        };
    },
    methods: {
        // 每条页数改变时会触发
        handleSizeChange(val) {
            this.total = val;
            this.getGoodsList();
        },
        // 当前页改变时触发
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getGoodsList();
        },
        // 编辑按钮
        handleEdit(row) {
            this.dialogVisible = true;
            this.ruleForm.name = row.name;
            this.ruleForm.category = row.category;
            this.ruleForm.price = row.price;
            this.ruleForm.imgUrl = row.imgUrl;
            this.ruleForm.goodsDesc = row.goodsDesc;
            this.ruleForm.id = row.id;
        },
        // 上传头像
        handleAvatarSuccess(res) {
            let { code, msg, imgUrl } = res;
            if (code == 0) {
                this.$message({
                    message: msg,
                    type: "success",
                });
            }
            this.imgUrl = imgUrl;
            this.ruleForm.imgUrl = imgUrl;
        },
        beforeAvatarUpload() {},
        // 修改确定按钮
        async changgeOk() {
            let res = await editGoods(this.ruleForm);
            this.dialogVisible = false;
            // 重新渲染
            this.getGoodsList();
        },
        // 删除商品
        handleDelete(row) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    await delGoods({
                        id: row.id,
                    });
                    this.getGoodsList();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 获取商品列表
        async getGoodsList() {
            let { data, total } = await getGoods({
                currentPage: this.currentPage,
                pageSize: this.pageSize,
            });
            this.total = total;
            this.tableData = data;
        },
        // 获取本地存储的分类列表
        getTypeList() {
            this.category = JSON.parse(local.getItem("typeList"));
        },
    },
    // 过滤函数
    filters:{
        timer(val){
            return moment(val).format("YYYY-MM-DD hh:mm:ss")
        }
    },
    // 生命周期
    created() {
        // 渲染
        this.getGoodsList();

        // 调用函数获取分类列表
        this.getTypeList();
    },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.el-pagination {
    margin-top: 10px;
}
.el-table__body {
    .cell {
        img {
            width: 50px;
            height: 50px;
            border-radius: 5px;
        }
    }
    .el-form-item__content {
        img {
            width: 50px;
            height: 50px;
            border-radius: 5px;
        }
    }
}
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}
.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
.longInput {
    width: 450px;
}
.img {
    width: 120px;
    height: 120px;
    display: block;
}
/deep/.el-table .cell {
    white-space:nowrap;
}
</style>